<template>
  <view class="Order">
    <view class="header">
      <Tabs :initTabIndex='initTabIndex' :nav='nav' @tabChange='toggleTab'></Tabs>
    </view>
    <view class="banner">
      <view class="item" v-for="item in orderList" :key="item.order_number">
        <view class="num">
          <view>订单编号</view>
          <view>{{item.order_number}}</view>
        </view>
        <view class="price">
          <view>订单金额</view>
          <view class="money">￥{{item.order_price}}</view>
        </view>
        <view class="time">
          <view>订单日期</view>
          <view>{{time(item.create_time)}}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import Tabs from '@/components/Tabs';
import http from '@/utils/http'; 
import dayjs from 'dayjs';
export default {
  components:{
    Tabs
  },
  data(){
   return{
     nav:['全部','待付款','待发货'],
     orderList:null,
     initTabIndex:0
   } 
  },
  onLoad(options){
    //从跳转页面获取的索引值
    const index=parseInt(options.index || 0);
    this.initTabIndex=index;
    this.toggleTab(index);
  },
  methods:{
    //切换不同tab
    async toggleTab(index){
      //索引每个tab加一,与接口对应
      const addindex=index +1;
      const token=uni.getStorageSync('token');
      //获取订单数据
      const res=await http.get('/my/orders/all',{ addindex }, token)
      this.orderList=res.orders;
    },
    time(timestamp){
      //使用dayjs
      return dayjs(timestamp * 1000).format('YYYY/MM/DD HH:mm:ss');
    }
  }
}
</script>

<style lang="less" scoped>
.Order{
  background-color: #f9f9f9;
  .header{
    width: 750rpx;
    height: 88rpx;
    margin-bottom: 5rpx;
  }
  .banner{
    .item{
      height: 250rpx;
      background-color: #fff;
      margin-bottom: 13rpx;
      padding: 39rpx 32rpx;
      color: #464646;
      .num{
        display: flex;
        justify-content: space-between;
        margin-bottom: 36rpx;
      }
      .price{
        display: flex;
        justify-content: space-between;
        margin-bottom: 36rpx;
        .money{
          color: #ec515d;
        }
      }
      .time{
        display: flex;
        justify-content: space-between;
      }
    }
  }
}
</style>